<template>
 <view>
	<kb-skeleton-index :loading="loading">
	  <!-- 滑动片骨架 -->
	<view class="swiper">
		 
		<view class="swiper-search">
			<up-search placeholder="搜索二手房/租房等房源" :show-action="true" :clearabled="false" v-model="keyword"
				:search-icon-color="ee.primayColor" search-icon-size="32" margin="0px 80rpx" shape="square" action-text=""
				:actionStyle="{
				backgroundImage: 'url('+ee.webUrl+'/images/icon_mapsearch.png)' ,
				backgroundPosition:'center',
				backgroundSize:'cover',  
				height:'60rpx', 
				width:'60rpx', zIndex:'20',
				marginLeft:'-72rpx',
				fontSize:'0.1em'
			}" @custom="gomap"></up-search>
		</view>
		<!-- 顶部幻灯片 -->
		<up-swiper height="120" :list="ee.indexslides" :radius="0" :circular="true"></up-swiper>
 
	</view>
	
   <!-- 导航的数量大于8个的时候自动出现滑块和底部的indicator-dots点图标 -->
	<swiper v-if="( ee.navmenu.length ) > 0" 
	 :indicator-dots="( (navmenuPage(ee.navmenu.length) >1))?true:false"
	 class="menu-swiper" :class="{ 'menu-show-dot': ( navmenuPage(ee.navmenu.length) >0) }">
		<swiper-item v-if="navmenuPage(ee.navmenu.length) > 0" v-for="k in (navmenuPage(ee.navmenu.length)  )" :key="k">
			<view class="menu"> 
				<view v-for="(item,index) in ee.navmenu.slice((k-1)*10, k*10)" :key="index" class="item">
					<view @click="ee.jumpto( item.pathurl , item.target) " :url="item.pathurl">
						<view class='item-icon'>
							<view v-if="item.iconpic" class='dao2'>
								<up-image  :src="item.iconpic"  width="45" height="45"></up-image>
								<!-- <image :src="item.iconpic" lazy-load="{{true}}" mode="widthFix" class="menu-img"></image> -->
							</view>
							<view v-else :class="'dao  bg'+(index+ 1)">
								<text :class="['iconfont' , item.icon ]"></text>
							</view>
						</view>
						<view class='dao-txt'>{{item.name}} </view>
					</view>
				</view>
			</view>
		</swiper-item>		 
	</swiper>
	<!-- 没有数据显示骨架 -->
 

	<view class="u-page">
		
		<view v-if="notice?.title" class="notice-box">
			<up-notice-bar :text="notice.title" mode="" speed="50" 
			direction="column" 
			:color="ee.primayColor"
				@click="showNotice" ></up-notice-bar>
		</view>
		<!-- 滚动通知end -->
 
	<view class="index-bar">
		<view class="index-bar-title">
			<text>热门房源</text>
		</view>
		<view class="index-bar-action">
		 <up-subsection :list="sectionType"
		 :activeColor="ee.primayColor"
		 @change="sectionChange"
		  font-size="14" bgColor="#fff" :current="0"></up-subsection>
		</view>
	</view>
	 
	<view v-for="(item, index) in sechouse" :key="index">

	 <kb-sechouse-item :zhutype="zhutype" :rent_type="rent_type" :house="item"></kb-sechouse-item>

	</view>
	
	<navigator :url="'/pages/house/house?zhutype='+zhutype">
	 <view class="findmore"> 查看更多房源 </view>
	 </navigator> 
	 
 </view> <!-- </u-page> end -->
	
	
	<kb-footer :color="ee.primayColor" ></kb-footer>
	<kb-page-bar current="home"></kb-page-bar>
	
	<!-- 最外层用骨架 -->
 </kb-skeleton-index>

</view>
</template>

<script>
	import util from "/common/tools/utils.js";
	export default {
		data() {
			return {
				loading: true,
				keyword: undefined,
			 
				adinfo: {},
			 
				notice: { }, 
				sechouse: [],				 
				rent_type : 0, //出售
				zhutype :0, //0=二手房 3=新房 2=租房 1=写字楼
				sectionType: [{name:'二手房', zhutype:0}, {name:'租房', zhutype:2}],
			}
		}, 
		 
		methods: {
			//处理导航菜单显示页数
			navmenuPage( nums ){	
				//console.log("huoqu", this.ee.navmenu)
				if(nums) {
					let v = Math.round(nums /10)
					//console.log( v)
					return v 
				}
				else return 0
			}, 
			sectionChange(i){				 
				 this.zhutype = this.sectionType[i].zhutype;
				 
				this.fetchHouse();
			},
			showNotice( i ){
				if( this.notice.url[i].link)
				//跳转到公众号文章webview显示
					this.ee.jumpto(this.notice.url[i].link, 1)
				else 
					this.ee.jumpto("/pages/page/show?id"+ this.notice.url[i].id)
			},
			gomap: function(value) {
				if (!value)
					uni.navigateTo({
						url: '/pages/login/login?keyword=' + value,
					})
				else
					uni.navigateTo({
						url: '/pages/map'
					})
			},
				
			fetchPageData(){
				 
				this.kbutil.getModuleData("webfront/notice").then( ret =>{
					this.notice = {
						title:  ret.title,
						url:  ret.url,
					}	
				})			 
				
				this.fetchHouse();	
			},
			fetchHouse(){
				//uni.showLoading({title: 'Loading...'});
				this.kbutil.getSechouseList(
					{
						zhutype:this.zhutype 
					}
				).then(
					(ret) => {
						this.sechouse = ret?.items || [];
						//uni.hideLoading();
						
						//延迟显示skeleton
					 setTimeout( ()=> this.loading = false ,1200)
						
					}
				) 
			}
			
		},
		mounted() {		
			
			console.log('mounted-------------')
			 
		    this.fetchPageData();
			 
			
		},
	 
		onLoad() {
			console.log('onload-----') 
			this.ee.getWxappAccount().then( ret => {
				uni.setNavigationBarTitle({
					title:  ret?.name||''  
				})	 
			 })
			 
		},
		onPullDownRefresh(){
			this.loading = true;
			this.fetchPageData();
			//刷新首页重新获取站点配置
			this.ee.initdata();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
				// uni.showToast({
				// 	title: 'Refresh Ok', icon: 'none'
				// }) 
			},1000)
			
		}
	}
</script>

<style lang="scss">
	.swiper {
		position: relative;
		z-index: 0;

		&-search {
			position: absolute;
			bottom: 20rpx;
			z-index: 10;
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: center;
			opacity: 0.9;
		}
	}

	.u-page {
		background: #fff !important;
		
		padding : 30rpx;
		padding-top: 0rpx;
		 
	}
	.notice-box{
		margin-left: -24rpx;
		margin-right: -30rpx;
	}
	.index-bar{
		display: flex;
		justify-content: space-between;
		vertical-align: center;
		align-items: center;
		
		&-title{
			font-size: 40rpx;
			font-weight: 400;
		}
		&-action{
			width: 30%;
		}
	}

	.menu-swiper {
		height: 410rpx;
	}
	.menu-show-dot{
		height: 410rpx;
	}

	/*导航菜单*/
	.menu {
		padding: 10rpx;
		padding-top: 40rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.menu .item {
		width: 20%;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		height: 180rpx;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/* Firefox */
		-webkit-box-sizing: border-box;
		/* Safari */
	}

	.menu .item-icon {
		display: flex;
		justify-content: center;
	}

	
</style>